/**
 * @Title: index.js
 * @Description: index
 * @author: Fanchao
 * @date: 2020/9/21 8:09 下午
 * @version V1.0
 */

import React, { useRef } from 'react';
import { Button, Card, Col, Form, Input, message, Row, Select } from 'antd';
import UploadImg from 'components/UploadImg';
import RichText from 'components/RichText';
import { connect, history } from 'umi';
import KeywordFroms from './keyword-form';
const { TextArea } = Input;

const formItemLayout = {
    labelCol: { span: 5 }, // 左侧label宽度
    wrapperCol: { span: 16 }, // 右侧输入框等的宽度
};
const tailLayout = {
    wrapperCol: { offset: 5, span: 16 },
};
const width = {
    width: '100%',
};

const { Item } = Form;
const { Option } = Select;
const ProductEdit = ({ expertEdit: { expertDetail, intro, thumbnail, big_images }, dispatch, loading }) => {
    const [form] = Form.useForm();
    form.setFieldsValue({
        name:expertDetail.name,
        research_area:expertDetail.research_area,
        fruit:expertDetail.fruit,
        title:expertDetail.title,
    });
    const refRich = useRef();

    const submit = () => {
        const intro = refRich.current.cbRichHtml();
        // const thumbnail = imgRefT.current.cbImgRef();
        // const big_images = imgRefB.current.cbImgRef();

        // if (big_images.length === 0) {
        //     message.warn('请上传商品详情图片');
        //     return;
        // }
        // if (intro === '<p></p>') {
        //     message.warn('请填写商品介绍');
        //     return;
        // }
        // if (thumbnail.length === 0) {
        //     message.warn('请上传商品图片');
        //     return;
        // }
        form.validateFields().then(async values => {
            console.log('values:', values);
            const { pname, original_price, price, stock } = values;
            values.id = expertDetail._id;
            // values.ORG = productDetail.ORG;
            // values.shop_name = productDetail.shop_name;
            // values.category_id = values.categoryOption.key;
            // values.category_name = values.categoryOption.label;
            // values.big_images = big_images.map(file => file.url);
            values.intro = intro;
            // values.spec_items = [{ thumbnail: thumbnail[0].url, pname, original_price, price, stock }];
            // delete values.categoryOption;
            // delete values.pname;
            // delete values.original_price;
            // delete values.price;
            // delete values.stock;
            dispatch({
                type: 'expertEdit/update',
                payload: values,
                callback: (res) => {
                    history.push('/expert-manage/list');
                },
            });
        }).catch(info => {
        });
    };

    // 更新 新闻 分类
    const updateNewsCb = (formData) => {
        const data = Object.assign(formData, { news_id: expertDetail.task_id });
        dispatch({
            type: 'ProductEditDetail/updateCategory',
            payload: data,
            callback: (res) => {
                // history.push('/news-manage/news/list');
            },
        });
    }

    if (loading) return null;

    const rows = [];
    // 领域	组织ORG	PER	来源
    return (
        <Card>
            <Form
                form={form}
                {...formItemLayout}
            >
                <Row>
                    <Col span={8}>
                        <Item
                            label="姓名"
                            name="name"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <Input placeholder="请输入姓名" />
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="职称"
                            name="title"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <Input placeholder="请输入研究领域" />
                        </Item>
                    </Col>
                    {/* <Col span={8}>
                        <Item
                            label="商品分类"
                            name="categoryOption"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <Select
                                placeholder="请选择商品分类"
                                labelInValue
                            >
                                {
                                    pcategoryOption.map(item => {
                                        return <Option key={item.id} value={item.id}>{item.name}</Option>;
                                    })
                                }
                            </Select>
                        </Item>
                    </Col> */}
                    {/* <Col span={8}>
                        <Item
                            label="简介"
                            name="summary"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <Input placeholder="请输入简介" />
                        </Item>
                    </Col> */}
                    <Col span={8}>
                        <Item
                            label="研究方向"
                            name="research_area"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <Input placeholder="请输入研究方向" />
                        </Item>
                    </Col>

                </Row>
                <Row>
                <Col span={8}>
                        <Item
                            label="主要工作及成果"
                            name="fruit"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <TextArea rows={8} placeholder="请输入主要工作及成果" />
                        </Item>
                    </Col>
                </Row>
                {/* <KeywordFroms keywords={[1,2,3]} updateNewsCb={updateNewsCb}/> */}
                <Row>
                    <Col span={8}>
                        <Item
                            label="简介"
                        >
                            <RichText
                                template={intro}
                                refRich={refRich}
                            />
                        </Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={8}>
                        <Item {...tailLayout}>
                            <Button type="primary" onClick={submit}>提交</Button>
                        </Item>
                    </Col>
                </Row>
            </Form>
        </Card>
    );
};

export default connect(({ expertEdit, dispatch, loading }) => ({
    expertEdit,
    dispatch,
    loading: loading.effects['expertEdit/getExpertDetail'],
}))(ProductEdit);
